Tooltip Implementatie: Toegankelijke Informatie bij Hover en Focus

Tooltips zijn kleine, contextuele hulpberichten die verschijnen wanneer een gebruiker met de muis over een element beweegt of erop focust. Ze kunnen extra informatie geven, het doel van een element verduidelijken of hints geven over het gebruik van een functie. Tooltips kunnen echter gemakkelijk een nachtmerrie voor de toegankelijkheid worden als ze niet correct worden geïmplementeerd. Deze gids beschrijft best practices voor het maken van tooltips die voor iedereen bruikbaar zijn, inclusief gebruikers met een beperking.

Waarom Toegankelijkheid Belangrijk is voor Tooltips

Toegankelijkheid gaat niet alleen over het naleven van regels; het gaat om het creëren van een betere gebruikerservaring voor iedereen. Wanneer tooltips niet toegankelijk zijn, kunnen gebruikers die afhankelijk zijn van ondersteunende technologieën zoals schermlezers, toetsenbordnavigatie of spraakinvoer worden uitgesloten. Overweeg deze scenario's:

• Gebruikers van schermlezers: Als een tooltip niet correct is opgemaakt, kan een schermlezer de aanwezigheid of inhoud ervan mogelijk niet aankondigen.
• Toetsenbordgebruikers: Als een tooltip alleen verschijnt bij 'hover', kunnen toetsenbordgebruikers er geen toegang toe krijgen.
• Gebruikers met motorische beperkingen: Nauwkeurige muisbewegingen die nodig zijn voor hover-interacties kunnen een uitdaging of onmogelijk zijn.
• Gebruikers met cognitieve beperkingen: Een slecht getimede of verwarrende tooltip kan frustratie veroorzaken en het begrip belemmeren.

Door de best practices voor toegankelijkheid te volgen, kunnen we ervoor zorgen dat tooltips de gebruikerservaring voor iedereen verbeteren in plaats van belemmeren.

Kernprincipes voor Toegankelijke Tooltips

De volgende principes zijn cruciaal voor het creëren van toegankelijke tooltips:

1. Bied alternatieve toegang: Zorg ervoor dat tooltips toegankelijk zijn via zowel 'hover' als toetsenbordfocus.
2. Gebruik ARIA-attributen: Gebruik ARIA (Accessible Rich Internet Applications) attributen om tooltips correct te identificeren en te beschrijven voor ondersteunende technologieën.
3. Beheer de focus: Bepaal waar de focus naartoe gaat wanneer een tooltip wordt weergegeven en verborgen.
4. Zorg voor voldoende contrast: Zorg voor voldoende kleurcontrast tussen de tekst van de tooltip en de achtergrond.
5. Geef voldoende tijd: Geef gebruikers genoeg tijd om de inhoud van de tooltip te lezen.
6. Maak ze sluitbaar: Bied een duidelijke manier om de tooltip te sluiten.
7. Vermijd overmatig gebruik: Gebruik tooltips spaarzaam en alleen wanneer dat nodig is.

Implementatietechnieken

1. Hover en Focus Gebruiken

Het meest kritieke aspect van toegankelijke tooltips is ervoor te zorgen dat ze toegankelijk zijn voor zowel muis- als toetsenbordgebruikers. Dit betekent dat de tooltip moet verschijnen zowel bij 'hover' als wanneer het element de focus krijgt.

HTML:

            <a href="#" aria-describedby="tooltip-example">Voorbeeld Link</a>
<div id="tooltip-example" role="tooltip" style="display: none;">Dit is een voorbeeld tooltip.</div>
            

              
                Copy
              
            
          

CSS:

            a:hover + div[role="tooltip"],
a:focus + div[role="tooltip"] {
  display: block;
  position: absolute;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 5px;
  z-index: 1000; /* Zorg ervoor dat de tooltip bovenaan staat */
}

            

              
                Copy
              
            
          

Uitleg:

• aria-describedby: Dit attribuut koppelt de link aan het tooltip-element via zijn ID. Dit vertelt ondersteunende technologieën dat de tooltip extra informatie geeft over de link.
• role="tooltip": Deze ARIA-rol identificeert het element als een tooltip.
• De CSS gebruikt de 'adjacent sibling selector' (+) om de tooltip te tonen wanneer er over de link wordt gehoverd of wanneer deze de focus krijgt.

JavaScript (Geavanceerde Controle - Optioneel):

Hoewel CSS eenvoudige show/hide-acties kan afhandelen, biedt JavaScript robuustere controle, vooral wanneer tooltips dynamisch worden gegenereerd of complexer gedrag vereisen.

            const link = document.querySelector('a[aria-describedby="tooltip-example"]');
const tooltip = document.getElementById('tooltip-example');

link.addEventListener('focus', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('blur', () => {
  tooltip.style.display = 'none';
});

link.addEventListener('mouseover', () => {
  tooltip.style.display = 'block';
});

link.addEventListener('mouseout', () => {
  tooltip.style.display = 'none';
});
            

              
                Copy
              
            
          

2. ARIA-attributen Gebruiken

ARIA-attributen zijn essentieel voor het verstrekken van semantische informatie aan ondersteunende technologieën. Hier is een overzicht van de belangrijkste attributen:

• aria-describedby: Zoals eerder vermeld, legt dit attribuut de relatie vast tussen het activerende element en het tooltip-element.
• role="tooltip": Dit attribuut definieert het element expliciet als een tooltip.
• aria-hidden="true"/aria-hidden="false": Gebruik deze om aan te geven of de tooltip momenteel zichtbaar is voor ondersteunende technologieën. Wanneer de tooltip verborgen is, stel je aria-hidden="true" in. Wanneer hij zichtbaar is, stel je aria-hidden="false" in. Dit is met name belangrijk wanneer je JavaScript gebruikt om de zichtbaarheid van de tooltip te beheren.

Voorbeeld:

            <button aria-describedby="help-tooltip">Verzenden</button>
<div id="help-tooltip" role="tooltip" aria-hidden="true">Klik hier om het formulier te verzenden.</div>
            

              
                Copy
              
            
          

JavaScript (voor aria-hidden):

            const button = document.querySelector('button[aria-describedby="help-tooltip"]');
const tooltip = document.getElementById('help-tooltip');

button.addEventListener('focus', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('blur', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});

button.addEventListener('mouseover', () => {
  tooltip.setAttribute('aria-hidden', 'false');
  tooltip.style.display = 'block';
});

button.addEventListener('mouseout', () => {
  tooltip.setAttribute('aria-hidden', 'true');
  tooltip.style.display = 'none';
});
            

              
                Copy
              
            
          

3. Focus Beheren

Wanneer een tooltip verschijnt, mag deze over het algemeen *geen* focus stelen van het activerende element. De focus moet op het element blijven dat de tooltip heeft geactiveerd. Dit zorgt ervoor dat toetsenbordgebruikers de pagina kunnen blijven navigeren zonder onverwachte onderbrekingen.

Er kunnen echter situaties zijn waarin u de focus *wel* naar de tooltip wilt verplaatsen, met name als de tooltip interactieve elementen bevat (bijv. links, knoppen). Zorg er in dat geval voor dat:

• De tooltip visueel onderscheidend is om aan te geven dat deze de focus heeft.
• Er een duidelijke manier is om de focus terug te brengen naar het oorspronkelijke activerende element (bijv. een sluitknop in de tooltip).

In de meeste gevallen heeft het vermijden van focusbeheer binnen de tooltip zelf de voorkeur voor eenvoud en bruikbaarheid.

4. Voldoende Contrast Garanderen

Kleurcontrast is cruciaal voor de leesbaarheid. Zorg ervoor dat de tekstkleur in uw tooltips voldoende contrast heeft met de achtergrondkleur. De Web Content Accessibility Guidelines (WCAG) bevelen een contrastverhouding aan van ten minste 4.5:1 voor normale tekst en 3:1 voor grote tekst (18pt of 14pt vet).

Gebruik online contrast checkers om te controleren of uw kleurkeuzes voldoen aan de toegankelijkheidsnormen. Voorbeelden van contrast checkers zijn:

• WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/
• Coolors: https://coolors.co/contrast-checker

Voorbeeld (Goed Contrast):

            .tooltip {
  background-color: #000;
  color: #fff;
}

            

              
                Copy
              
            
          

Voorbeeld (Slecht Contrast):

            .tooltip {
  background-color: #fff;
  color: #eee;
}

            

              
                Copy
              
            
          

5. Voldoende Tijd Toestaan

Gebruikers hebben voldoende tijd nodig om de inhoud van de tooltip te lezen. Vermijd tooltips die te snel verdwijnen. Hoewel er geen magisch getal is, streef naar een minimale weergavetijd van een paar seconden. De tooltip moet ook zichtbaar blijven zolang de gebruiker over het activerende element zweeft of erop focust. Als u de tooltip moet sluiten vanwege andere gebeurtenissen, geef dan een indicatie dat de tooltip zal sluiten.

Als de inhoud van de tooltip lang is, overweeg dan een manier te bieden waarop de gebruiker de tooltip handmatig kan sluiten (bijv. een sluitknop of het indrukken van de Escape-toets).

6. Ze Sluitbaar Maken

Hoewel tooltips vaak automatisch verdwijnen wanneer de gebruiker de muis wegbeweegt of de focus verwijdert, is het een goede gewoonte om een duidelijke manier te bieden om ze handmatig te sluiten, vooral voor lange tooltips of tooltips die interactieve elementen bevatten.

Methoden om Tooltips te Sluiten:

• Sluitknop: Voeg een visueel prominente sluitknop toe binnen de tooltip.
• Escape-toets: Sta gebruikers toe de tooltip te sluiten door op de Escape-toets te drukken.
• Klik buiten: Sluit de tooltip wanneer de gebruiker ergens buiten de tooltip en het activerende element klikt. (Gebruik met voorzichtigheid, want dit kan storend zijn).

Voorbeeld (Sluitknop):

            <div id="my-tooltip" role="tooltip" aria-hidden="true">
  Dit is de inhoud van mijn tooltip.
  <button onclick="hideTooltip()">Sluiten</button>
</div>
            

              
                Copy
              
            
          

Voorbeeld (Escape-toets):

            document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    hideTooltip(); // Vervang door uw daadwerkelijke functie om de tooltip te verbergen
  }
});

            

              
                Copy
              
            
          

7. Overmatig Gebruik Vermijden

Tooltips moeten spaarzaam worden gebruikt en alleen wanneer ze echt nuttige informatie bieden. Overmatig gebruik van tooltips kan de interface onoverzichtelijk maken, gebruikers afleiden en een frustrerende ervaring creëren.

Alternatieven voor Tooltips:

• Duidelijke labels: Gebruik duidelijke en beschrijvende labels voor formuliervelden, knoppen en links.
• Contextuele hulp: Bied hulptekst direct binnen de interface, in de buurt van de relevante elementen.
• Hulpdocumentatie: Link naar uitgebreide hulpdocumentatie voor complexere functies.

Geavanceerde Overwegingen

Dynamische Inhoud

Als de inhoud van uw tooltip dynamisch wordt gegenereerd (bijv. geladen vanuit een API of bijgewerkt op basis van gebruikersinvoer), zorg er dan voor dat het aria-describedby-attribuut en de zichtbaarheid van de tooltip dienovereenkomstig worden bijgewerkt. Gebruik JavaScript om deze updates te beheren.

Positionering

Overweeg zorgvuldig de positionering van uw tooltips. Plaats ze niet op een manier die belangrijke inhoud verbergt of layoutverschuivingen veroorzaakt. Houd rekening met verschillende schermformaten en resoluties, en gebruik CSS om ervoor te zorgen dat tooltips altijd zichtbaar zijn binnen de viewport.

Mobiele Apparaten

Tooltips zijn traditioneel afhankelijk van hover-interacties, die niet beschikbaar zijn op touch-gebaseerde apparaten. Overweeg voor mobiele apparaten alternatieve interactiemethoden te gebruiken, zoals:

• Tikken: Toon de tooltip wanneer de gebruiker op het element tikt.
• Lang indrukken: Toon de tooltip wanneer de gebruiker het element lang indrukt.
• Tonen bij focus: Toon wanneer het element de focus krijgt. Dit kan worden bereikt met JavaScript, door te controleren op touch-ondersteuning (bijv. ('ontouchstart' in window)) en het weergavegedrag dienovereenkomstig aan te passen.

Het Testen van Uw Tooltips

Test uw tooltips grondig om ervoor te zorgen dat ze toegankelijk zijn voor alle gebruikers. Gebruik een combinatie van handmatig testen en geautomatiseerde toegankelijkheidstesttools.

Testmethoden:

• Toetsenbordnavigatie: Controleer of tooltips toegankelijk zijn met het toetsenbord.
• Schermlezertesten: Gebruik een schermlezer om ervoor te zorgen dat tooltips correct worden aangekondigd.
• Kleurcontrastanalyse: Gebruik een kleurcontrast checker om voldoende contrast te verifiëren.
• Mobiel testen: Test tooltips op verschillende mobiele apparaten en schermformaten.
• Geautomatiseerd toegankelijkheidstesten: Gebruik tools zoals axe DevTools, WAVE of Lighthouse om mogelijke toegankelijkheidsproblemen te identificeren.

Internationalisatie (i18n) en Lokalisatie (l10n)

Houd bij het ontwikkelen van tooltips voor een wereldwijd publiek rekening met internationalisatie en lokalisatie:

• Tekstrichting: Ondersteun zowel links-naar-rechts (LTR) als rechts-naar-links (RTL) tekstrichtingen. Gebruik CSS logische eigenschappen (bijv. margin-inline-start, margin-inline-end) in plaats van fysieke eigenschappen (bijv. margin-left, margin-right) voor de lay-out.
• Taalspecifieke vertalingen: Zorg voor vertalingen van de tooltip-inhoud voor verschillende talen.
• Datum- en tijdnotaties: Pas datum- en tijdnotaties aan de landinstelling van de gebruiker aan.
• Getalnotaties: Gebruik de juiste getalnotaties voor verschillende regio's (bijv. scheidingstekens voor decimalen, duizendtallen).

Conclusie

Het implementeren van toegankelijke tooltips vereist zorgvuldige planning en aandacht voor detail. Door de principes en technieken in deze gids te volgen, kunt u tooltips maken die voor iedereen bruikbaar zijn, ongeacht hun vaardigheden. Onthoud dat toegankelijkheid een doorlopend proces is, dus blijf uw tooltips testen en verfijnen om ervoor te zorgen dat ze aan de behoeften van al uw gebruikers voldoen.

Bronnen

• ARIA Authoring Practices Guide (APG) - Tooltip
• Web Content Accessibility Guidelines (WCAG) 2.1
• MDN Web Docs - ARIA